﻿@{
    ViewBag.Title = "Sale by Product per city";
}

<h2>Sale by Product per city</h2>
<table >

@foreach (var item in ViewBag.Cities)
{
    <tr>
        <td>
           @item.Value
            <div id="chart_SalePerSkuPerCity@(item.Key)" style="width: 500px; height: 300px;">
            </div>
            <script type="text/javascript">
                google.load("visualization", "1", { packages: ["corechart"] });
                google.setOnLoadCallback(drawlineChart);
                function drawlineChart() {

                    $.post('/bat/GetSkuVolumeByCityDashBoard', {cityId: @(item.Key)},
            function (data) {
                var tdata = new google.visualization.DataTable(data, 0.5);

                var options = {
                    title: "Total Sales @item.Value ",
                    legend: { position: 'right', textStyle: { color: 'blue', fontSize: 10} },
                    is3D: true
                };

                var chart = new google.visualization.PieChart(document.getElementById('chart_SalePerSkuPerCity@(item.Key)'));
                chart.draw(tdata, options);
            });
                }
          </script>
        </td>
    </tr>
}

</table>
